<template>
  <x-dialog
    ref="dialog"
    :title="title"
    :width="600"
    :loading="loading"
    :strong="true"
    @submit="submit"
  >
    <v-form ref="form" lazy-validation>
      <v-row v-if="isShow">
        <v-col cols="12">
          <v-text-field
            v-model="formData.name"
            label="按键名称*"
            dense
            :rules="[rules.required]"
          />
        </v-col>
        <v-col cols="12">
          <v-text-field
            v-model="formData.val"
            label="对应快捷键*"
            dense
            :rules="[rules.required]"
          />
          <v-btn @click="clearTap">clear</v-btn>
        </v-col>
      </v-row>
    </v-form>
  </x-dialog>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { ValidateRules } from "@/utils/ValidateRules";
import XDialog from "@/components/XDialog.vue";
import hotkeys from "hotkeys-js";
import { deepClone } from "@/utils";
@Component({
  components: { XDialog },
})
export default class SignDlg extends Vue {
  isShow = false;
  loading = false;
  rules = ValidateRules;
  mode = "add";
  imgs: any = {};
  get title() {
    return "编辑按键";
  }
  data: any = {};
  keyCodeMap: any = {
    "8": "backspace",
    "9": "tab",
    "12": "clear",
    "13": "enter",
    "16": "shift",
    "17": "control",
    "18": "alt",
    "19": "pause",
    "27": "escape",
    "32": "space",
    "33": "pageup",
    "34": "pagedown",
    "35": "end",
    "36": "home",
    "37": "left",
    "38": "up",
    "39": "right",
    "40": "down",
    "45": "insert",
    "46": "delete",
    "48": "0",
    "49": "1",
    "50": "2",
    "51": "3",
    "52": "4",
    "53": "5",
    "54": "6",
    "55": "7",
    "56": "8",
    "57": "9",
    "65": "a",
    "66": "b",
    "67": "c",
    "68": "d",
    "69": "e",
    "70": "f",
    "71": "g",
    "72": "h",
    "73": "i",
    "74": "j",
    "75": "k",
    "76": "l",
    "77": "m",
    "78": "n",
    "79": "o",
    "80": "p",
    "81": "q",
    "82": "r",
    "83": "s",
    "84": "t",
    "85": "u",
    "86": "v",
    "87": "w",
    "88": "x",
    "89": "y",
    "90": "z",
    "96": "numpad_0",
    "97": "numpad_1",
    "98": "numpad_2",
    "99": "numpad_3",
    "100": "numpad_4",
    "101": "numpad_5",
    "102": "numpad_6",
    "103": "numpad_7",
    "104": "numpad_8",
    "105": "numpad_9",
    "112": "f1",
    "113": "f2",
    "114": "f3",
    "115": "f4",
    "116": "f5",
    "117": "f6",
    "118": "f7",
    "119": "f8",
    "120": "f9",
    "121": "f10",
    "122": "f11",
    "123": "f12",
    "136": "num_lock",
    "137": "scroll_lock",
    "187": "=",
    "188": ",",
    "189": "-",
    "190": ".",
    "191": "/",
    "192": "`",
    "219": "[",
    "220": "\\",
    "221": "]",
    "222": "'",
  };
  formData: any = {};
  async created() {
    hotkeys("*", "wcj", function () {
    });
    document.body.addEventListener("keydown", this.getkey);
  }
  hotKey?: any = [];
  getkey(e:Event) {
    // e.preventDefault();
    let hk = hotkeys.getPressedKeyCodes();
    if (this.hotKey.length < hk.length) {
      this.hotKey = hk;
      let val = [];
      for (const key in this.hotKey) {
        if (Object.prototype.hasOwnProperty.call(this.hotKey, key)) {
          const code: any = this.hotKey[key];
          if (this.keyCodeMap[code]) {
            val.push(this.keyCodeMap[code]);
          }
        }
      }
      this.formData.val = val.join("+");
      this.$forceUpdate();
    }
  }
  clearTap() {
    this.hotKey = [];
    this.formData.val = "";
    this.$forceUpdate()
  }
  success(res?: any) {}
  show(config?: any) {
    this.formData = {
      qrCodeType: 0,
      haveSignOut: false,
    };
    let dialog: any = this.$refs.dialog; //绕过ts语法检测
    this.success = (res: any) => {};
    this.data = config.data || {};
    this.mode = config.mode || "add";
    this.formData = Object.assign(this.formData, deepClone(this.data));
    if (typeof config == "object") {
      if (typeof config.success == "function") this.success = config.success;
    }
    if (config.mode == "edit") this.mode == "edit";
    dialog.show();
    this.isShow = true;
  }
  async submit() {
    let dialog: any = this.$refs.dialog; //绕过ts语法检测
    let form: any = this.$refs.form;
    if (form.validate()) {
      let data = deepClone(this.formData);
      dialog.hide();
      this.success(data);
    }
  }
}
</script>
<style lang="scss" scope="this api replaced by slot-scope in 2.5.0+">
</style>